import { View, Text, TouchableOpacity } from "react-native"
import React, { useEffect, useState } from "react"
import { scale } from "react-native-size-matters"
import { useAppSelector } from "app/redux/hooks"
import { Feather } from "@expo/vector-icons"
import { addWeeks, format } from "date-fns"
import { Dropdown } from "react-native-element-dropdown"

//Local Imports
import { colors } from "app/theme"
import { styles } from "../styles"
import { LineSeperator } from "app/components/LineSeparator"
import CheckBoxComponent from "app/components/CheckBox"
import { dateArray } from "app/constants/dateArray"
import { MultiDatePicker } from "../MultiDatePick"

type RepeatViewProps = {
  error: string
  weekCheckbox: boolean
  dateCheckBox: boolean
  onPressDateCheckBox: (data: boolean) => void
  onPressWeekCheckBox: (data: boolean) => void
  onPressRepeat: (number_of_weeks: number) => void
  onPressRepeatGap: (number_of_weeks: number) => void
  onSelectDates: (data: any) => void
}
const AppointmentRepeatView = ({
  onPressWeekCheckBox,
  onPressDateCheckBox,
  onPressRepeatGap,
  onSelectDates,
  onPressRepeat,
  weekCheckbox,
  dateCheckBox,
  error,
}: RepeatViewProps) => {
  const appointmentState = useAppSelector((state) => state?.createAppointment)

  const [futureDate, setFutureDate] = useState("")
  const [isFocus, setIsFocus] = useState(false)
  const [value, setValue] = useState(null)

  useEffect(() => {
    if (appointmentState?.number_of_weeks) {
      const currentDate = new Date()
      setFutureDate(
        format(addWeeks(currentDate, appointmentState?.number_of_weeks), "MMMM d, yyyy"),
      )
    }
  }, [appointmentState?.number_of_weeks])

  const renderItem = (item: any) => {
    return (
      <View style={styles.item}>
        <Text style={styles.weekText}>{item.label}</Text>
      </View>
    )
  }

  return (
    <View
      style={
        weekCheckbox || dateCheckBox ? styles?.weeklyReportActive : styles.weeklyReportInActive
      }
    >
      <View
        style={{
          flexDirection: "row",
          justifyContent: "space-between",
          paddingHorizontal: scale(10),
        }}
      >
        <View style={styles.checkBoxContainer}>
          <CheckBoxComponent
            disabled={
              appointmentState?.appointmentLocationType === "ethera" ||
              appointmentState?.appointmentLocationType === ""
                ? true
                : false
            }
            value={weekCheckbox}
            onValueChange={(newValue) => {
              onPressWeekCheckBox(newValue)
            }}
          />
          <Text style={styles.checkBoxText}>Weekly Repeats</Text>
        </View>
        <View style={styles.checkBoxContainer}>
          <CheckBoxComponent
            disabled={appointmentState?.appointmentLocationType === "" ? true : false}
            value={dateCheckBox}
            onValueChange={(newValue) => onPressDateCheckBox(newValue)}
          />

          <Text style={styles.checkBoxText}>Select Dates</Text>
        </View>
      </View>
      {weekCheckbox && (
        <>
          <LineSeperator />
          <View style={styles.middleView}>
            <Text style={styles.weekText}>Every</Text>
            <View style={{ flexDirection: "row", columnGap: 5 }}>
              {[1, 2, 3, 4].map((item) => {
                return (
                  <TouchableOpacity
                    key={item}
                    style={[
                      styles.activeWeekView,
                      appointmentState?.number_of_weeks === item
                        ? { borderColor: colors.green }
                        : { borderColor: "#978F8A" },
                      error && !appointmentState?.number_of_weeks && { borderColor: "red" },
                    ]}
                    onPress={() => {
                      onPressRepeat(item)
                    }}
                  >
                    <Text
                      style={
                        appointmentState?.number_of_weeks === item
                          ? styles.activeTextView
                          : styles.weekText
                      }
                    >
                      {item}
                    </Text>
                  </TouchableOpacity>
                )
              })}
            </View>

            <Text style={styles.weekText}>Week(s)</Text>
            <Dropdown
              dropdownPosition="bottom"
              itemContainerStyle={{ padding: 0 }}
              style={[
                styles.repeatView2,
                isFocus && { borderColor: "black" },
                error && !appointmentState?.weeklyRepeatGap && { borderColor: "red" },
              ]}
              activeColor={colors.dullGreen}
              placeholderStyle={styles.placeholderStyle}
              selectedTextStyle={styles.placeholderStyle}
              data={dateArray.map((item) => ({
                label: item?.label,
                value: item?.value,
              }))}
              maxHeight={200}
              labelField="label"
              valueField="value"
              placeholder={"..."}
              value={appointmentState?.weeklyRepeatGap}
              onFocus={() => setIsFocus(true)}
              onBlur={() => setIsFocus(false)}
              onChange={(item) => {
                onPressRepeatGap(parseInt(item.value))
                setIsFocus(false)
                setValue(item.value)
              }}
              renderItem={renderItem}
            />
          </View>
          <View style={styles.lowerView}>
            <Feather name="clock" size={18} color="black" />
            <View style={styles.repeatView}>
              <Text style={[{ paddingHorizontal: scale(10) }, styles.weekText]}>
                {futureDate && appointmentState?.number_of_weeks
                  ? `Repeat Will end on ${futureDate}`
                  : "Yet To Decide"}
              </Text>
            </View>
          </View>
        </>
      )}

      {dateCheckBox && (
        <>
          <LineSeperator />
          <MultiDatePicker onSelectDates={onSelectDates} />
        </>
      )}
    </View>
  )
}

export default AppointmentRepeatView
